<template>
	<div>
		<el-table stripe border :data="list" style="width: 100%; text-align: center">
			<el-table-column prop="id" label="序列号" width="180"></el-table-column>
			<el-table-column label="图片" width="150">
				<template #default="scope">
					<el-image :src="onFilterUrl(scope.row.picture)"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="product" label="名称" />
			<el-table-column prop="price" label="价格" />
			<el-table-column prop="categoryname" label="分类" />

			<el-table-column label="操作" width="280">
				<template #default="scope">
					<el-button size="small" @click="onEdit(scope.row)">编辑</el-button>
					<el-popconfirm
						title="确认删除吗？"
						confirm-button-text="确认"
						cancel-button-text="取消"
						@confirm="onDelete(scope.row.id)"
					>
						<template #reference>
							<el-button size="small" type="danger">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			background
			:page-sizes="[5, 10, 20, 30]"
			layout="total,sizes, prev, pager, next, jumper"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:total="total"
		>
		</el-pagination>

		<el-dialog v-model="dialogFormVisible" title="修改商品" :categoryList="categoryList">
			<el-form :model="product" label-position="right"  label-width="100px">
				<el-form-item label="商品分类" >
					<el-select v-model="product.categoryId" placeholder="请选择商品分类">
						<el-option
							v-for="item in categoryList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品名">
					<el-input v-model="product.productname"></el-input>
				</el-form-item>
				<el-form-item label="店铺名">
					<el-input v-model="product.shop"></el-input>
				</el-form-item>
				<el-form-item label="原价">
					<el-input v-model="product.price"></el-input>
				</el-form-item>
				<el-form-item label="现价">
					<el-input v-model="product.oldPrice"></el-input>
				</el-form-item>
				<el-form-item label="是否上架">
					<el-radio-group v-model="product.putaway">
						<el-radio label="1" size="large">上架</el-radio>
						<el-radio label="0" size="large">下架</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取消</el-button>
					<el-button type="primary" @click="onUpdateProduct"> 确定 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { RequestProductList, RequestDeleteProduct, RequestCategoryList,RequestUpdateProduct } from '@/api/product'
import { baseURL } from '@/utils/request'
export default {
	data() {
		return {
			list: [],
			currentNo: 1,
			pageSize: 5,
			total: 0,
			dialogFormVisible: false,
			product: {
				shop: '', //店铺名称
				productname: '', //商品名称
				picture:'',//图片
				price: '',
				oldPrice: '',
				putaway: '1', //是否架上架:1下架:0
				categoryId: '', //分类id
			},
			categoryList: [],
		}
	},
	created() {
		this.getProductList()
		this.getCategoryList()
	},
	methods: {
		async getProductList() {
			let data = await RequestProductList(this.currentNo, this.pageSize)
			let { resultCode, resultInfo } = data
			if (resultCode == 1) {
				this.total = resultInfo.total //总记录条数
				this.list = resultInfo.list
				console.log('list ',this.list);
			}
		},
		// 更新页数 pageSize
		handleSizeChange(value) {
			this.pageSize = value
		},
		// 更新页号 pageNo 1, 2,
		handleCurrentChange(value) {
			this.currentNo = value
			this.getProductList()
		},
		onFilterUrl(url) {
			// console.log('url ',url);
			return url.indexOf('http') == -1 ? `${baseURL}${url}` : url
		},
		onDelete(id) {
			RequestDeleteProduct(id).then(data => {
				let { resultCode, resultInfo } = data
				if (resultCode == 1) {
					ElMessage.success('删除成功!')
					this.getProductList()
				}
			})
			// ElMessageBox.confirm('确定删除此记录吗?', '提示信息', {
			// 	confirmButtonText: '确定',
			// 	cancelButtonText: '取消',
			// 	type: 'warning',
			// }).then(() => {
			// 	RequestDeleteProduct(id).then(data => {
			// 		let { resultCode, resultInfo } = data
			// 		if (resultCode == 1) {
			// 			ElMessage.success('删除成功!')
			// 			this.getProductList()
			// 		}
			// 	})
			// })
		},
		onEdit(row) {
			this.dialogFormVisible = true
			this.product = {
				id:row.id,
				categoryId:row.categoryId,
				productname:row.product,
				picture:row.picture,
				shop:row.shop,
				price:row.price,
				oldPrice:row.oldprice,
				putaway:row.putaway+''
			}
		},
		async getCategoryList() {
			let data = await RequestCategoryList()
			let { resultCode, resultInfo } = data
			if (resultCode == 1) {
				this.categoryList = resultInfo.list
			}
		},
		async onUpdateProduct(){
			this.dialogFormVisible = false 
			let data = await RequestUpdateProduct(this.product)
			let {resultCode,resultInfo} = data
			if(resultCode == 1){
				this.getProductList()
			}
		}
	},
}
</script>
<style scoped></style>
